<template>
  <!-- 推荐专区 -->
  <view class="panel hot">
    <view class="item">
      <view class="title">
        <text class="title-text">萌宠日常</text>
        <navigator class="title-nav" hover-class="none" >
          <text class="title-desc">查看更多</text>
          <text class="title-arrow">></text>
        </navigator>
      </view>
      <navigator hover-class="none"  class="cards">
        <video
          id="myVideo"
          :src="src"
          :controls="controls"
          :autoplay="autoplay"
          style="width: 100%; height: 150px;"
        ></video>
        <view class="description">
          <text class="description-text">蓝精灵与红帽的快乐时光</text>
        </view>
      </navigator>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      src: this.$loadUrl + '0.mp4', // 视频地址
      controls: true,  // 是否显示控制条
      autoplay: false  // 是否自动播放
    };
  },
  methods: {
    // Add any necessary methods here
  }
};
</script>

<style lang="scss">
/* 热门推荐 */
.hot {
  display: flex;
  flex-wrap: wrap;
  min-height: 508rpx;
  margin: 20rpx 20rpx 0;
  border-radius: 10rpx;
  background-color: #fff;

  .title {
    display: flex;
    align-items: center;
    padding: 24rpx 24rpx 0;
    font-size: 32rpx;
    color: #262626;
    position: relative;
    .title-text {
      // 省略了其他样式
    }
    .title-nav {
      display: flex;
      align-items: center;
      margin-left: auto; // 将导航放到最右边
      .title-desc {
        font-size: 24rpx;
        color: #7f7f7f;
      }
      .title-arrow {
        font-size: 24rpx;
        color: #7f7f7f;
        margin-left: 18rpx;
      }
    }
  }

  .item {
    display: flex;
    flex-direction: column;
    width: 100%; // 设置宽度为100%
    border-right: 0 none; // 移除右边框
    border-top: 1rpx solid #eee;
    .title {
      justify-content: start;
    }
    .video {
      width: 100%; // 视频宽度
      height: 150px; // 视频高度
      border-radius: 10rpx;
      object-fit: cover;
    }
    .description {
      padding: 10rpx 0;
      text-align: center;
      .description-text {
        font-size: 28rpx;
        color: #262626;
      }
    }
  }
  .cards {
    flex: 1;
    padding: 15rpx 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
</style>
